import React, { useState, useContext } from "react";
// 引入仓库
import storeContext from "@/context/storeContext";
// 引入样式
import style from "./planList.less";
// 与mobx建立联系
import { observer } from "mobx-react-lite";
import { Button, Input } from "antd";
import { PlusOutlined, SearchOutlined } from "@ant-design/icons"
// 引入请求 
import { getClassInfo, getPlanLists } from "@/services/index";
import { palnsList } from "@/utils"
import { useEffect } from "react";

const planList: React.FC = () => {
    // 班级
    let [grade, setgrade] = useState(["全部", "网站2021A班"]);
    let [headerlist, setHeaderList] = useState(["未开始", "进行中", "已结束"])
    // 高亮
    let [active, setactive] = useState(0);
    let { planList } = useContext(storeContext);
    let [queryParams, setQueryParams] = useState<palnsList>({ classId: "9", searchName: "", ifFinished: 1, pageNum: 1, pageSize: 10, } as palnsList)
    // 发起数据请求
    useEffect(() => {
        planList.getClassInfo()
    }, [])
    // 发起表格请求
    useEffect(() => {
        getPlanLists(queryParams).then((ok) => {
            console.log(ok);
        })
    })

    return <div className={style.teacher_pages}>
        <div className={style.header}>
            <div className={style.planList_headers}>
                <div aria-label="Breadcrumb" role="navigation" className={style.el_breadcrumb}>
                    <span className={style.el_breadcrumb__item}>
                        <span role="link" className={style.el_breadcrumb__inner}>计划</span>
                        <span role="presentation" className={style.el_breadcrumb__separator}>/</span>
                    </span>
                    <span className={style.el_breadcrumb__item} aria-current="page">
                        <span role="link" className={style.el_breadcrumb__inner}>计划管理</span>
                        <span role="presentation" className={style.el_breadcrumb__separator}></span>
                    </span>
                </div>
            </div>
        </div>
        <div className={style.main}>
            <div className={style.planList_main}>
                <div className={style.train_resource}>
                    <div className={style.resource_type}>
                        <div className={style.r_t_title}>班级：{planList.searchname},{planList.getclassInfo}</div>
                        <div className={style.r_t_list}>
                            {
                                grade.map((item, index) => {
                                    return <span key={item} className={active === index ? style.active : ""} onClick={() => {
                                        setactive(index)
                                    }}>{item}</span>
                                })
                            }
                            {/* <span className={style.active}>全部</span>
                            <span className="">网站2021A班</span> */}
                        </div>
                    </div>
                </div>
                <div className={style.cont}>
                    <div className={style.plan_cont}>
                        <div className={style.input_tab}>
                            <div className={style.el_radio_group}>
                                {
                                    headerlist.map((item, index) => {
                                        return <span key={index}>{item}</span>
                                    })
                                }
                            </div>
                            <Button type="primary" icon={<PlusOutlined />}>提交审核</Button>
                            <Input placeholder="搜索岗位" suffix={<SearchOutlined />}></Input>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

export default observer(planList)